<!-- 用户反馈 -->
<template>
	<div id="user_advice">
		<el-form :inline="true" class="demo-form-inline" size="medium" :disabled="load">
			<el-form-item>
				<el-select v-model="requestParam.status" placeholder="状态" clearable @change="getList(1)">
					<el-option :value="item.value" :label="item.label" v-for="(item, index) in statusList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="requestParam.suggestType" placeholder="建议类型" @change="getList(1)" clearable>
					<el-option :value="item.value" :label="item.label" v-for="(item, index) in suggestTypeList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="requestParam.tenantId" placeholder="选择分站" @change="getList(1)" clearable>
					<el-option v-for="item in tenantList" :label="item.company" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-input v-model="requestParam.busId" placeholder="商家id"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getList(1)">搜索</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="list" stripe style="width: 100%" v-loading="load">
			<el-table-column prop="id" label="id" width="90" align="center"></el-table-column>
			<el-table-column 
				label="分站"
				align="center">
				<template slot-scope="scope">
					<span v-for="item in tenantList" v-if="item.id == scope.row.tenant_id">{{item.company}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="bus_id" label="商家id" width="120" align="center"></el-table-column>
			<el-table-column label="反馈类型" prop="type" align="center">
                <template slot-scope="scope" >
					<span v-if="scope.row.type === 1">商家反馈</span>
				</template>
            </el-table-column>
			<el-table-column label="建议类型" prop="suggest_type" align="center">
                <template slot-scope="scope" >
					<span v-if="scope.row.suggest_type === 1">意见反馈</span>
					<span v-if="scope.row.suggest_type === 2">功能建议</span>
					<span v-if="scope.row.suggest_type === 3">客服投诉</span>
				</template>
            </el-table-column>
			<el-table-column prop="content" label="反馈内容" align="center"></el-table-column>
			<el-table-column label="反馈图片" align="center">
				<template slot-scope="scope">
					<div v-if="scope.row.imgs!=null">
						<el-image :src="scope.row.imgs.split(',')[0] | fullPath" :preview-src-list="$common.getUrls(scope.row.imgs.split(','))" style="width:100px; height:100px">
						</el-image>
					</div>
					
				</template>
			</el-table-column>
			<el-table-column prop="reply" label="回复内容" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.reply || '--'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" width="120" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.status == 0" class="error">未回复</span>
					<span v-if="scope.row.status == 1" class="success">已回复</span>
					<span v-if="scope.row.status == 2" class="success">已回复</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" width="150" align="center">
				<template slot-scope="scope">
					<span>{{$moment(scope.row.createTime).format('Y-MM-DD HH:mm')}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="reply(scope.row.id)" v-if="scope.row.status == 0">回复</el-button>
					<span v-else>--</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="total, prev, pager, next" :page-size="requestParam.pageSize" :total="total" class="align-right margin_top20"
		 @current-change="getList">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				requestParam: {
					busId: '',
					tenantId:'',
					suggestType:'',
					status: 0,
					startTime: '',
					endTime: '',
					pageSize: 10,
				},
				total: 0,
				load: false,
				date: [],
				dialogVisible: false,
				statusList: [
					{
						value: 1,
						label: '已回复'
					},
					{
						value: 0,
						label: '未回复'
					}
				],
				suggestTypeList: [
					{
						value: 1,
						label: '意见反馈'
					},
					{
						value: 2,
						label: '功能建议'
					},
					{
						value: 3,
						label: '客服投诉'
					}
				],
				tenantList: [],
			};
		},

		created() {
			this.getTenantList();
			this.getList(1);
		},

		methods: {
			timeChange(val){
				if(val){
					this.requestParam.startTime = this.$common.getDate(val[0]);
					this.requestParam.endTime = this.$common.getDate(val[1]);
				}else{
					this.requestParam.startTime = ''
					this.requestParam.endTime = ''
				}
			},
			getTenantList(){
				this.$request.post({
					url: '/ReportApi/admin/useralllist',
					success: res => {
						this.tenantList = res
					}
				})
			},
			// 获取列表
			getList(pageNo) {
				if (this.date && this.date.length) {
					this.requestParam.startTime = this.$moment(this.date[0]).format('Y-MM-DD HH:mm:ss')
					this.requestParam.endTime = this.$moment(this.date[1]).format('Y-MM-DD HH:mm:ss')
				} else {
					this.date = [];
					this.requestParam.startTime = ''
					this.requestParam.endTime = ''
				}
				this.load = true
				this.requestParam.pageNo = pageNo
				this.$request.post({
					url: '/ReportApi/admin/useradviceList',
					params: this.requestParam,
					success: result => {
						this.list = result[0]
						this.total = result[1]
					},
					finally: () => {
						this.load = false
					}
				})
			},


			// 回复
			reply(id) {
				var index = this.list.findIndex(item => {
					return item.id = id
				})
				this.$prompt('输入回复信息', '回复', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /\S/,
					inputErrorMessage: '请输入回复内容'
				}).then(({
					value
				}) => {
					this.load = true
					this.$request.post({
						url: '/ReportApi/admin/userely',
						params: {
							id,
							content: value
						},
						success: result => {
							this.$message.success('回复成功')
							this.getList(1);
						},
						finally: () => {
							this.load = false
						}
					})
				})
			}


		}

	}
</script>

<style>

</style>

<style scoped>

</style>
